﻿// clickToEditBox

(function ($, undefined) {

    // define the name of the UI component
    var ui_name = "clickToEditBox"

    // initialize object
    var clickToEditBox = $.clickToEditBox = {

        // default values
        defaults: {
            defaultValue: '单击这里填写内容和',
            canEdit: true
        },

        setDefaults: function (defaultOptions) {
            this.defaults = $.extend({}, this.defaults, defaultOptions);
        }
    };

    $.fn.clickToEditBox = function (options) {

        // method calling
        if (typeof options == 'string') {
            var args = Array.prototype.slice.call(arguments, 1),
			res;
            this.each(function () {
                var data = $.data(this, ui_name);
                if (data) {
                    var meth = data[options];
                    if (meth) {
                        var r = meth.apply(this, args);
                        if (res === undefined) {
                            res = r;
                        }
                    }
                }
            });
            if (res !== undefined) {
                return res;
            }
            return this;
        }

        // initialize options
        options = $.extend({}, clickToEditBox.defaults, options);

        /* globle vars 
        -----------------------------------------------------------------------------*/
        var globle = {
            contentValue: '',
            editPanel: null,
            textArea: null
        };

        this.each(function () {
            var _self = $(this);

            if (_self) {
                // 初始化 DOM 树
                initializeDom();
            }


            // initialize callback
            for (var key in options) {
                var value = options[key];
                if (typeof value == 'function') {
                    // bind callbacks
                    $(_self).bind(key, value);
                }
            }


            /* Private Methods
            -----------------------------------------------------------------------------*/

            function initializeDom() {
                globle.contentValue = $(_self).html();
                if ($(_self).html() == '') {
                    $(_self).html(options.defaultValue);
                }

                globle.editPanel = $(options.editPanel).clone(true);
                if (!globle.editPanel) {
                    globle.editPanel = $('<div/>');
                }

                globle.textArea = $('<textarea class="ui-textbox"></textarea>')
                    .width($(_self).width());

                var btnSubmit = $('<input type="button" value="提交">');
                var btnCancel = $('<a>取消</a>');

                // textArea 按下ESC的事件
                // textArea 按下ctrl + 回车 的事件

                // btnSubmit 提交事件
                $(btnSubmit).click(function () {

                    var oldValue = '';
                    if ($(_self).html() != options.defaultValue) {
                        oldValue = $(_self).html();
                    }

                    globle.contentValue = globle.textArea.val();

                    if (globle.contentValue == '') {
                        $(_self).html(options.defaultValue).fadeIn();
                    } else {
                        $(_self).html(globle.contentValue.htmlEncode().trim()).fadeIn();
                    }
                    globle.editPanel.hide();

                    if (oldValue != globle.contentValue) {
                        onContentChanged(oldValue);
                    }
                });

                // btnCancel 提交事件

                $(btnCancel).click(function () {
                    $(_self).show();
                    globle.editPanel.hide();
                });


                globle.editPanel
                  .append(globle.textArea)
                  .append(
                    $('<div/>')
                      .append(btnSubmit)
                      .append('&nbsp;或者&nbsp;')
                      .append(btnCancel)
                    );

                globle.editPanel.insertAfter(_self).hide();

                $(_self)
                    .addClass('click-to-edit-panel')
                    .click(function () {
                        if (options.canEdit) {
                            $(_self).hide();
                            globle.editPanel.fadeIn();
                            globle.textArea.val(globle.contentValue).select().focus();
                        }
                    });
                // 给_self加上Click事件
            }




            /* Callback Triggers
            -----------------------------------------------------------------------------*/

            function onContentChanged(oldValue) {
                $(_self).trigger("contentChanged",
                    {
                        OldValue: oldValue,
                        NewValue: globle.contentValue
                    });
            }



            /* Public Methods
            -----------------------------------------------------------------------------*/

            var publicMethods = {
                //                //set options
                //                option: function (name, value) {
                //                    if (value === undefined) {
                //                        return options[name];
                //                    }
                //                    options[name] = value;
                //                },
                contentValue: function (value) {
                    if (value === undefined) {
                        // 返回当前的值
                        return globle.contentValue;
                    } else {
                        // 设置新的值
                        if (!value) value = '';
                        globle.contentValue = value;
                        if (value == '') {
                            $(_self).html(options.defaultValue);
                        }
                        else {
                            $(_self).html(value.htmlEncode().trim());
                        }
                    }
                }
            };

            $.data(this, ui_name, publicMethods);


        });

        return this;
    };



})(jQuery);
